<template>
  <el-container class="main_con">
    <div class="filter_con ds_block">
      <div class="button_area"><el-button type="primary" v-has size="medium" @click="addTemplate">新增模板</el-button></div>
      <div class="filter_area">
        <el-input class="serach_input mr_15 mt_15" size="medium" v-model="obj.name" placeholder="支付名称" style="width:300px"></el-input>
        <label class="mr_15 mt_15">支付方式</label>
        <el-select size="medium" v-model="obj.mode" placeholder="请选择" class="mr_15 mt_15">
          <el-option v-for="item in mode" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>

        <!-- <label class="mr_15 mt_15">创建时间</label>
        <date-picker size="medium" @change="getTime" class="mr_15 mt_15"></date-picker> -->
        <el-button class="mr_15 mt_15" @click="searchList" size="medium">搜索</el-button>
      </div>
    </div>
    <div class="list_con">
      <el-table :data="list" element-loading-text="" fit highlight-current-row>
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="name" label="支付名称"></el-table-column>
        <el-table-column prop="mode" label="支付方式" width="200px">
          <template slot-scope="scope">
            <span v-if="scope.row.mode == 1">微信支付</span>
            <span v-if="scope.row.mode == 2">支付宝支付</span>
            <span v-if="scope.row.mode == 3">新微信支付</span>
          </template>
        </el-table-column>
        <el-table-column prop="type_text" label="支付类型" width="200px"></el-table-column>
        <el-table-column label="操作" width="150px">
          <template slot-scope="scope">
            <el-button v-has type="text" @click="editItem(scope.row.id)">编辑</el-button>
            <el-button v-has type="text" @click="delItem(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="table_footer" style="flex-direction: row-reverse;" v-show="total != 0">
        <el-pagination @current-change="changePage" class="pages" background hide-on-single-page layout="prev, pager, next" :total="total"></el-pagination>
      </div>
    </div>
  </el-container>
</template>

<script>
// import DatePicker from '@/components/DatePicker/index';
import {getPayList, delPay} from '@/api/mall/pay';
export default {
  data() {
    return {
      mode: [
        {
          value: -1,
          label: '全部'
        },
        {
          value: 1,
          label: '微信'
        },
        {
          value: 2,
          label: '支付宝'
        }
      ],
      obj: {
        name: '',
        mode: -1
        //type:''
      },
      objTemp: {},
      total: 0,
      page: 1,
      size: 10,
      isLoading: false,
      list: []
    };
  },
  components: {},
  mounted() {
    this.searchList();
  },
  methods: {
    //新增模板
    addTemplate() {
      //this.$router.push('/pay/item');
      this.$router.push('/finance/pay/payTemplateItem');
    },
    //获取时间
    // getTime(value) {
    //   this.obj.begin_date = value[0];
    //   this.obj.end_date = value[1];
    // },
    //查询数据
    searchList() {
      //复制查询对象
      this.objTemp = Object.assign({}, this.obj);
      //删除mode == -1的情况
      if (this.objTemp.mode == -1) {
        delete this.objTemp.mode;
      }
      this.getDataList();
    },
    //查询数据本体
    getDataList() {
      this.isLoading = true;
      getPayList(this.objTemp, this.page, this.size).then(res => {
        this.isLoading = false;
        let o = res.msg;
        this.list = o.data;
        this.total = o.total;
      });
    },
    //编辑数据
    editItem(id) {
      // this.$router.push({path:'/pay/item',query:{'id':id,k:Math.random()}});
      this.$router.push({path: '/finance/pay/payTemplateItem', query: {id: id, k: Math.random()}});
    },
    //删除数据
    delItem(id) {
      this.$confirm('是否要删除该条数据？')
        .then(_ => {
          this.isLoading = true;
          delPay(id).then(res => {
            this.isLoading = false;
            this.getDataList();
          });
        })
        .catch(_ => {
          //出错
        });
    },
    //切换分页
    changePage(page) {
      this.page = page;
      this.getDataList();
    }
  }
};
</script>

<style lang="scss" scoped></style>
